<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div style="height: 50px;line-height: 50px;background: #ccc;">
            <a href="#/no1">小王</a>
            <a href="#/no2">小李</a>
        </div>
        <div style="min-height: 500px;">
            <router-view></router-view>
        </div>
        <div style="height: 150px;line-height: 150px;text-align: center;font-size: 20px;background: #ccc;">
        页尾</div>
    </div>
    <template id="no1">
        <div>
            <div style="float: left;min-height: 500px;border-right: 1px solid black;text-align: center;width: 200px;line-height: 40px;">
                <div><a href="#/no1">
                年龄1
                </a></div>
                <div><a href="#/no1/type">
                爱好1
                </a></div>
            </div>
            <div style="float: left;">
                内容：1
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="no2">
        <div>
            <div style="float: left;min-height: 500px;border-right: 1px solid black;text-align: center;width: 200px;line-height: 40px;">
                <div><a href="#/no2">
                年龄2
                </a></div>
                <div><a href="#/no2/type">
                爱好2
                </a></div>
            </div>
            <div style="float: left;">
                内容：2
                <router-view></router-view>
            </div>
        </div>
    </template>
</body>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    var no1={template:'#no1'}
    var no2={template:'#no2'}
    var routes=[
        {path:'/',redirect:'/no1'},
        {path:'/no1',name:'no1',component:no1,
            children:[
            {
                path:'/',
                name:'no1age',
                component:{
                template:'<p>20</p>'
            }
            },
            {
                path:'type',
                name:'no2age',
                component:{
                template:'<p>听音乐</p>'
            }
            },
            ]
        },
        {path:'/no2',name:'no2',component:no2,
        children:[
            {
                path:'/',
                name:'no2age',
                component:{
                template:'<p>23</p>'
            }
            },
            {
                path:'type',
                name:'no2type',
                component:{
                template:'<p>足球</p>'
            }
            },
            ]
        },
    ]
    var router=new VueRouter({
        routes
    })
    new Vue({
        el:'#box',
        router
    })
</script>
</html>